<template>
  <div class="priceingBackDialog">
    <el-dialog title="整改详情" :visible.sync="isShow" width="70%" center>
      <!-- <h3 class="tc mb20">
        <span class="mr10">{{ data.user.name }}</span
        >{{ data.user.phone}}

      </h3> -->
      <orderInfo ref="orderInfoRef" :orderInfos="detailsInfo" :orderData="data">
        <template
          #list_pic
          v-if="data.scene_record_info && data.scene_record_info.list_pic"
        >
          <tablePrImga
            :isNeedBaseUrl="true"
            :imgSrc="JSON.parse(data.scene_record_info.list_pic)"
            :prImgList="JSON.parse(data.scene_record_info.list_pic) || []"
          ></tablePrImga>
        </template>
        <template #defect>
          <div class="defectScrool">
            {{ data.defect }}
          </div>
        </template>
          <template #department  v-if="data.user" >
          <div class="defectScrool">
            {{ data.user.department }}
          </div>
        </template>
        <template #name>
          <div v-if="data.user">
            {{ data.user.name }}
          </div>
        </template>
 <template #approval_opinion>
          <div v-if="data.scene_record_info" class="approval_opinionScrool">
            {{ data.scene_record_info.approval_opinion }}
          </div>
        </template>
        <template #approval_status>
          <div>
            {{
              data.approval_status == 0
                ? "未审核"
                : "" || data.approval_status == 1
                ? "已采纳"
                : "" || data.approval_status == 2
                ? "未采纳"
                : ""
            }}
          </div>
        </template>
        <template #phone >
          <div  v-if="data.user && data.user.phone">{{ data.user.phone }}</div>
          </template>
        <template #opinion v-if="data.scene_record_info && data.scene_record_info.opinion">
          <div class="htmlScrool">
            <div v-html="data.scene_record_info.opinion"></div>
          </div>
        </template>
      </orderInfo>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancel">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import orderInfo from "@c/orderInfo.vue";
import { sceneRecordInfo } from "@a/user";
import { MessageBox, Message } from "element-ui";
import { detailsInfo } from "../config.js";
import tablePrImga from "@c/table-prImga.vue";
export default {
  data() {
    return {
      isShow: false,
      data: {},
      loading: false,
      id: null,
      detailsInfo,
    };
  },
  components: { orderInfo, tablePrImga },
  watch: {
    id: {
      handler: function (val) {
        if (val) {
          this.getData();
        }
      },
      immediate: true,
    },
  },
  methods: {
    getData() {
      this.loading = true;
      let params = {
        id: this.id,
      };
      sceneRecordInfo(params).then((res) => {
        if (res.code == 200) {
          if (res.data.scene_record_info.opinion != null) {
            res.data.scene_record_info.opinion = res.data.scene_record_info.opinion.replace(
              new RegExp("\\${baseUrl}", "g"),
              this.$GLOBAL.baseurl + "/storage/"
            );
          }

          this.data = res.data;
        }
        this.loading = false;
      });
    },
    cancel() {
      this.isShow = false;
    },

    show(id) {
      this.id = id;
      this.isShow = true;
    },
  },
};
</script>

<style lang="less"  scoped>
.priceingBackDialog {
  /deep/.el-dialog {
    min-width: 500px;
  }
  .defectScrool {
    max-height: 300px;
    overflow-y: scroll;
  }
  .approval_opinionScrool{
     max-height: 300px;
    overflow-y: scroll;
  }
  /deep/.el-image,
  .tableFile {
    padding: 5px 0;
    vertical-align: middle;
  }
}
</style>
<style lang="less" >
.htmlScrool {
  max-height: 500px;
  overflow-y: scroll;

  img {
    max-width: 500px !important;
  }
}
</style>